{% extends "base.html" %}
{% block Titulo %}Altas de negocio{% endblock %}
 {% block content %}
    <link href="/mediapage/alta.css" rel="stylesheet" type="text/css">

 <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjcqoXJ51BMwSN5DJCSUQ6xSYMEwC_lqkQJQkmYhhxQf-H4OPgxQPvIsx06Th16ADATkgP1wofE2w_g"
            type="text/javascript"></script>

<link rel="stylesheet" href="/mediapage/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
<script type="text/javascript" src="/mediapage/ui.core.js"></script>
<script type="text/javascript" src="/mediapage/ui.tabs.js"></script>
<script type="text/javascript">
    
    //Referencias
    var MisLugares = [{% for lugar in lista_lugares %}
                        [{{lugar.longitud}},{{ lugar.latitud }},'{{ lugar.descripcion }}','{{ lugar.sitioWeb }}']
                        {% if not forloop.last %},
                        {% endif %}
                    {% endfor %}];
    //Variables globales  GULP!!
    var TiposMarker= { Referencias:0, Busquedas:1 };

    function addLugar(map, lat, lng, lugar, Web, tipo)
    {
        markerOptions="";
        if (tipo==TiposMarker.Busquedas)
        {
            var greenIcon = new GIcon(G_DEFAULT_ICON);
            greenIcon.image = "http://gmaps-samples.googlecode.com/svn/trunk/markers/green/blank.png";
            markerOptions = { icon:greenIcon };
        }
        var markerpt = new GLatLng(lat, lng);
        var marker = new GMarker(markerpt,markerOptions);        
        var html = '<b>' + lugar + '</b><br>' + Web;
            
        GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); });
        map.addOverlay(marker);        
    }
    
    function initialize()
    {
      if (GBrowserIsCompatible()) {
	var centro=new GLatLng(24.8035, -107.3892);
        map = new GMap2(document.getElementById("map_canvas"));
		map.addControl(new GSmallMapControl());
		map.removeMapType(G_SATELLITE_MAP);
		map.addControl(new GMapTypeControl());
        map.setCenter(centro, 13);
        if (MisLugares) {
            for (var i=0; i < MisLugares.length; i++)
            {
                addLugar(map,MisLugares[i][0], MisLugares[i][1], MisLugares[i][2], MisLugares[i][3],TiposMarker.Referencias);
            }            
        }
	
	//Marker arrastable	
	var marker = new GMarker(centro, {draggable: true});

        GEvent.addListener(marker, "dragstart", function() {
          map.closeInfoWindow();
        });

	map.addOverlay(marker);

      }
    }
    
    function trim(cadena)
    {
	for(i=0; i<cadena.length; )
	{
		if(cadena.charAt(i)==" ")
			cadena=cadena.substring(i+1, cadena.length);
		else
			break;
	}

	for(i=cadena.length-1; i>=0; i=cadena.length-1)
	{
		if(cadena.charAt(i)==" ")
			cadena=cadena.substring(0,i);
		else
			break;
	}	
	return cadena;
    }
    
    function AddPhone()
    {
        var lista=trim($("#telefonos").attr("value")+$("#telefono").attr("value")+"\n");
        //$("#telefonos").attr("value",lista);
        $("#telefonos").html(lista);
        $("#telefono").attr("value","");
        
    }
    
    $(document).ready(function(){
       $("#Formulario > ul").tabs(); 
    });
    </script>
<body onLoad="initialize()" onUnload="GUnload()">

<div id="map_canvas" ></div>
<br>
<div id="Formulario" class="flora">
    <ul>
        <li><a href="#descripcion"><span>Descripcion del negocio</span></a></li>
        <li><a href="#direccion"><span>Direccion</span></a></li>
        <li><a href="#contacto"><span>Datos de contacto</span></a></li>
    </ul>
    <div id="descripcion">
        <table >
            <tr>
                <td>Nombre:</td>
                <td><textarea cols="60" id="desc"></textarea></td>
                <td>Tipo:</td>
                <td>
                    <select id="objetos" name="objetos">
                        {% if tipos %}
                            {% for x in tipos %}
                                <option value="{{ x.tipo|escape }}">{{ x.tipo|escape }}</option>
                            {% endfor %}
                        {% endif %}
                    </select>
                </td>
            </tr>
            
        </table>
    </div>
    <div id="direccion">
        <table width="664" >
          <tr>
            <td>Calle:</td>
            <td><input id="calle"></td>
            <td>Numero Exterior:</td>
            <td><input id="numext"></td>
          </tr>
          <tr>
            <td>Numero Interior:</td>
            <td><input id="numint"></td>
            <td>Colonia:</td>
            <td><input id="colonia"></td>
          </tr>
          <tr>
            <td>Piso:</td>
            <td><input id="piso"></td>
            <td>Andador:</td>
            <td><input id="andador"></td>
          </tr>
        </table>  
  </div>
   <div id="contacto">
        <table width="670" height="74" >
          <tr>
            <td>Web Site:</td>
            <td><input id="web"></td>
            <td>E-Mail:</td>
            <td><input id="mail" value="@"></td>
          </tr>
          <tr>
            <td>Telefono:</td>
            <td><input id="telefono" maxlength="10"></td>
            <td><button id="addphone" onclick="AddPhone();">Insertar telefono</button></td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td><textarea name="telefonos" readonly="true" id="telefonos" rows="5"> </textarea></td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          </table>
    </div>
</div>
</body>
{% endblock %}